<ion-view view-title="更换车票" class="xg-ticket-view" ng-controller="changeTicketCtrl">
  <ion-nav-buttons side="left">
    <a class="ion-ios-home-outline" href="#/tab/home"></a>
  </ion-nav-buttons>
  <ion-content class="xg-ticket-content">

    <ion-list class="xg-ticket-ul float-fix">
      <p class="xg-ticket-info" ng-if="noValidTickets"><span class="ion-ios-chatbubble"></span>您还没有可更换的车票！</p>
      <ion-item class="item-remove-animate item-avatar item-icon-right xg-ticket-item xg-ticket-item-work row"
                ng-repeat="validateTicket in validateTickets" type="item-text-wrap" ng-click=openModal(validateTicket)>

        <div class="xg-col-20">
          <img ng-if="validateTicket.routeId<5" src="img/home/tc.png">
          <img ng-if="validateTicket.routeId>4&&validateTicket.routeId<10" src="img/home/tj.png">
        </div>
        <div class="xg-col-80">
          <div class="float-fix">
            <span class="ion-ios-location-outline"></span>
            <p>{{validateTicket.busNumber}}号车 {{validateTicket.seatNumber}} 号座, 乘坐人: {{validateTicket.seatName}}</p>
          </div>
          <div class="float-fix">
            <span class="ion-ios-clock-outline">
            </span>
            <p>发车时间: {{validateTicket.date}} </p>
          </div>
          <div class="float-fix">
            <span class="ion-ios-loop">
            </span>
            <p>路线: {{validateTicket.routeName}}</p>
          </div>
        </div>
        <i class="icon ion-arrow-right-b ion-arrow-swap"></i>
      </ion-item>
    </ion-list>

    <script id="ticketChangeModal" type="text/ng-template">
      <div class="modal xg-percar-view">
        <ion-header-bar class="booking-modal">
          <h1 class="title">更换车票</h1>
        </ion-header-bar>
        <ion-content class="booking-modal-content xg-percar-content">
          <ng-form name="changeForm">
          <p class="booking-modal-p">您要替换的车票：</p>
          <ion-list class="xg-percar-ul float-fix">
            <ion-item class="item-remove-animate item-avatar item-icon-right xg-percar-item xg-percar-item-work">
              <div class="float-fix">
                    <span class="ion-ios-clock-outline">
                     </span>
                <p>时间：{{ticketOrigin.date}}</p>
              </div>
              <div class="float-fix">
                <span class="ion-ios-loop"></span>
                <p>路线：{{ticketOrigin.routeName}}</p>
              </div>
              <div class="float-fix">
                <span class="ion-ios-location-outline"></span>
                <p>位置：{{ticketOrigin.busNumber}} 号车，第 {{ticketOrigin.seatNumber}} 位</p>
              </div>
            </ion-item>
            <p class="booking-modal-p">新的车票信息：</p>
            <ion-list class="xg-percar-ul float-fix">
              <ion-item class="item-remove-animate item-avatar item-icon-right xg-percar-item xg-percar-item-work xg-new-ticket-info">
                <div class="float-fix">
                    <span class="ion-ios-clock-outline">
                     </span>
                  <p>时间：{{busNew.departuredate}}</p>
                </div>
                <div class="float-fix">
                  <span class="ion-ios-loop"></span>
                  <p>路线：{{busNew.routeName}}</p>
                </div>
                <div class="float-fix">
                  <span class="ion-ios-checkmark-outline"></span>
                  <p>已定：<i class="booking-info">{{busNew.occupation}}</i> <i class="booking-info" ng-if="(busNew.seatcount-busNew.occupation)==0&&busNew!=undefined" class="bus-route">已无空位</i></p>
                </div>
                <div class="float-fix">
                  <span class="ion-ios-location-outline"></span>
                  <p>位置：{{busNew.number}} 号车，第 {{newSeatNumber}} 位</p>
                </div>
              </ion-item>
          </ion-list>
            <p class="booking-modal-p">请选择车号与座位号：</p>
            <ion-list class="xg-percar-ul float-fix">
              <ion-item class="item-remove-animate item-avatar item-icon-right xg-percar-item xg-percar-item-work xg-new-ticket-info-input">
                <div class="float-fix">
                    <span class="ion-android-bus">
                     </span>
                  <p>车号<select ng-options="bus.number for bus in buses" required ng-change="selectedBusChange(selectedBus)" ng-model="selectedBus"></select></p>
                </div>
                <div class="float-fix">
                  <span class="ion-ios-location"></span>
                  <p>车座：<select ng-options="leftSeatNumber for leftSeatNumber in leftSeats" ng-change="selectedSeatNumberChange(selectedSeatNumber)" required ng-model="selectedSeatNumber"></select></p>
                </div>

              </ion-item>
            </ion-list>
          <div class="float-fix xg-check-detail">
            <button class="button xg-check-detail-btnr" ng-click="changeTicketInfo()" ng-disabled="changeForm.$invalid">
              更换
            </button>
            <button class="button xg-check-detail-btnl" ng-click="closeModal()">
              取消
            </button>
          </div>
          </ng-form>
        </ion-content>
      </div>
    </script>

  </ion-content>
</ion-view>
